<template>
    <div>

        <div id="head">
            <div class="shang">
                <p class="wenzi">花伍</p>
                <van-search class="shousuo" shape="round" v-model="value" placeholder="请输入搜索关键词" />
                <van-icon class="icon2" name="phone-o" size="35" />
            </div>


            <div class="lunbo">
                <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white">
                    <van-swipe-item>
                        <img src="	https://img02.hua.com/pc/pimg/home/home_channel_rexiao.png" />

                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="https://img02.hua.com/pc/pimg/home/home_channel_tejia.png" alt="">

                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="	https://img02.hua.com/pc/pimg/home/home_channel_xinpin.png" alt="">

                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="	https://img02.hua.com/pc/pimg/home/home_channel_pinwei.png" alt="">

                    </van-swipe-item>
                </van-swipe>

            </div>



        </div>

        <div class="body">
            <div class="wen1">
                <div class="zuo">

                    <van-icon class="icon3" name="volume" size="15" />


                    <p class="zuo-wen1">公告:</p>

                </div>
                <div class="zhong">
                    <van-swipe style="height: 30px;" :autoplay="3000" vertical>
                        <van-swipe-item>
                            <van-icon name="shop-collect-o" color="orange" size="16" /> 鲜花电商认证龙头企业
                        </van-swipe-item>
                        <van-swipe-item>
                            <van-icon name="flower-o" color="orange" size="16" /> 17年品牌
                        </van-swipe-item>
                        <van-swipe-item>
                            <van-icon name="clock" color="orange" size="16" /> 3小时全国送花
                        </van-swipe-item>
                        <van-swipe-item>
                            <van-icon name="gold-coin-o" color="orange" size="16" /> 200%退赔承诺
                        </van-swipe-item>
                        <van-swipe-item>
                            <van-icon name="good-job-o" color="orange" size="16" /> 最近471448条评价
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <div class="you">
                    <van-icon name="arrow" />
                </div>

            </div>
            <div class="wzxx">
                <p class="xx1">09-14(今日的)第一场交易中</p>
                <p class="xx2">今日成交量14815扎</p>
            </div>
            <div class="hua">
                <ul>
                    <li>
                        <div class="tu">

                            <img src="../../picture/9010966.jpg_220x240.jpg" alt="">
                        </div>
                        <p>玫瑰</p>

                    </li>
                    <li>
                        <div class="tu">

                            <img src="../../picture/9012177.jpg_220x240.jpg" alt="">
                        </div>
                        <p>康乃馨</p>

                    </li>
                    <li>
                        <div class="tu">

                            <img src="../../picture/9012452.jpg_220x240.jpg" alt="">
                        </div>
                        <p>百合</p>

                    </li>
                    <li>
                        <div class="tu">

                            <img src="../../picture/9012455.jpg_220x240.jpg" alt="">
                        </div>
                        <p>菊花</p>

                    </li>
                    <li>
                        <div class="tu">

                            <img src="../../picture/9012461.jpg_220x240.jpg" alt="">
                        </div>
                        <p>绣球花</p>

                    </li>
                    <li>
                        <div class="tu">

                            <img src="../../picture/9012467.jpg_220x240.jpg" alt="">
                        </div>
                        <p>洋桔梗</p>

                    </li>
                    <li>
                        <div class="tu">

                            <img src="../../picture/9012471.jpg_220x240.jpg" alt="">
                        </div>
                        <p>草花</p>

                    </li>
                    <li>
                        <div class="tu">

                            <img src="../../picture/9012473.jpg_220x240.jpg" alt="">
                        </div>
                        <p>配花</p>

                    </li>
                    <li>
                        <div class="tu">

                            <img src="../../picture/9012584.jpg_220x240.jpg" alt="">
                        </div>
                        <p>配叶</p>

                    </li>
                    <li>
                        <div class="tu">

                            <img src="../../picture/9012599.jpg_220x240.jpg" alt="">
                        </div>
                        <p>交易大厅</p>

                    </li>
                </ul>
                <div class="tup">
                    <img src="https://img02.hua.com/pc/pimg/home/home_channel_friend.jpg" alt="">
                    <img src="https://img02.hua.com/pc/pimg/home/home_channel_elder2.jpg" alt="">

                </div>


            </div>





            <div class="wen2">
                <p>花伍报价已包含打包费，材料费，交易佣金</p>
            </div>

            <div class="jiaoyi">
                <div class="wen-top">
                    <p class="top-p1"> 09-14 11:00 花伍成交均价</p>
                    <p>
                        <van-icon name="arrow" size="13" />
                    </p>

                </div>
                <div class="wen-bottom">
                    <ul class="ul1">
                        <li>
                            <div class="nk">
                                <div class="ww1">单头玫瑰</div>
                                <div class="ww2">
                                    <p>21.94</p>
                                    <van-icon class="icon4" name="down" size="13" />

                                </div>
                                <div class="ww3">
                                    <p>-0.60</p>
                                    <p>-2.66%</p>
                                </div>
                            </div>

                        </li>
                        <li>
                            <div class="nk">
                                <div class="ww1">单头玫瑰</div>
                                <div class="ww2">
                                    <p>21.94</p>
                                    <van-icon class="icon4" name="down" size="13" />

                                </div>
                                <div class="ww3">
                                    <p>-0.60</p>
                                    <p>-2.66%</p>
                                </div>
                            </div>

                        </li>
                        <li class="shugang">
                            <div class="nk">
                                <div class="ww1">单头玫瑰</div>
                                <div class="ww2">
                                    <p>21.94</p>
                                    <van-icon class="icon4" name="down" size="13" />

                                </div>
                                <div class="ww3">
                                    <p>-0.60</p>
                                    <p>-2.66%</p>
                                </div>
                            </div>

                        </li>
                    </ul>
                    <ul class="ul2">
                        <li>
                            <div class="nk">
                                <div class="ww1">单头玫瑰</div>
                                <div class="ww2">
                                    <p>21.94</p>


                                </div>
                                <div class="ww3">
                                    <p>-0.60</p>
                                    <p>-2.66%</p>
                                </div>
                            </div>

                        </li>
                        <li>
                            <div class="nk">
                                <div class="ww1">单头玫瑰</div>
                                <div class="ww2">
                                    <p>21.94</p>
                                    <van-icon class="icon4" name="down" size="13" />

                                </div>
                                <div class="ww3">
                                    <p>-0.60</p>
                                    <p>-2.66%</p>
                                </div>
                            </div>

                        </li>
                        <li class="shugang">
                            <div class="nk">
                                <div class="ww1">单头玫瑰</div>
                                <div class="ww2">
                                    <p>21.94</p>
                                    <van-icon class="icon4" name="down" size="13" />

                                </div>
                                <div class="ww3">
                                    <p>-0.60</p>
                                    <p>-2.66%</p>
                                </div>
                            </div>

                        </li>
                    </ul>

                </div>

            </div>
            <div class="xxx">
                <div class="zuo">
                    <img src="../../picture/0x300a0a0.png" alt="">
                    <p class="zuo-p1">实时成交</p>
                    <p class="zuo-p2">09-16 22:11</p>


                </div>
                <div class="you">
                    <div class="you-top">
                        <p class="mz">洋桔梗白(B)</p>
                        <p class="shu"> 11.9</p>
                        <p class="hz">元/扎</p>
                        <p class="shu">2</p>
                        <p class="hz">扎成交</p>

                    </div>
                    <div class="you-bottom">
                        <p class="mm">卖方</p>
                        <p class="ren">林飞星花</p>
                        <p class="mm mm1">买方</p>
                        <p class="ren ren1">158****9602</p>


                    </div>

                </div>



            </div>

            <div class="sp">
                <div class="sp-top">
                    <div class="top-zuo">
                        <div class="zuo-top">
                             <p class="qg">限时特价超划算</p>
                        </div>
                        <div class="zuo-bottom">
                           <p class="jjs">距结束</p>
                           <p class="sj sj1">00</p>
                           <p class="mh">:</p>
                           <p class="sj">33</p>
                           <p class="mh">:</p>
                           <p class="sj">08</p>


                        </div>

                   

                    </div>
                    <div class="top-you">
                        <p class="qc">全场低至4.9元
                            <van-icon name="arrow" size="16" />
                        </p>

                    </div>


                </div>
                <div class="sp-bottom">
                    <Shop></Shop>
                 
                </div>

            </div>


        </div>








    </div>

</template>



<script>

import { ref } from 'vue';

export default {




    setup() {
        const value = ref('');
        return { value };
    },


    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style scoped >
* {
    margin: 0px;
    padding: 0px;
}

::v-deep .van-swipe__indicators {
    display: none;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;

}

/*
    头部的文字
    */
.wenzi {
    padding-left: .75rem;
    font-size: 1.5rem;
    font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
    font-weight: 700;
    width: 15%;
}

/*
    头部的电话图标
    */
.icon2 {
    padding-top: .8125rem;
    width: 10%;
}

/*
    头部的搜索框
    */
.shousuo {
    background: rgb(129, 160, 103);
    width: 70%;
    padding: 1.25rem .625rem 0rem .625rem;
    height: 2.5rem;



}

.van-search__content {
    background: rgb(129, 160, 103);
    border: 1px solid white;
}

/*
    下面的主体部分
    */
.body {
    width: 100%;

    background-color: rgb(244, 244, 244);
    border-radius: 30px 30px 0px 0px;
    overflow: hidden;
    margin-top: -2.5rem;
}

.body .wen1 {
    height: 30px;
    background: rgb(255, 255, 255);

    width: 90%;
    margin: 0 auto;
    margin-top: 6.25rem;
    border-radius: .8125rem;


}

.body .wen1 .zuo {
    float: left;
    line-height: 30px;
    width: 18%;


}

.body .wen1 .zuo .zuo-wen1 {
    float: left;
    font-size: 13px;
    line-height: 30px;
    height: 30px;
    margin-left: 3px;
}

.body .wen1 .zuo .icon3 {
    margin-left: 3px;
    float: left;
    line-height: 30px;
}

.body .wen1 .you {
    width: 8%;
    float: right;
    line-height: 30px;
    font-size: 13px;
}

.body .wen1 .zhong {
    width: 70%;
    line-height: 30px;
    font-size: 14px;
    float: left;
    text-align: center;

}

.wzxx {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
    height: 30px;

}

.wzxx .xx1 {
    line-height: 30px;
    font-weight: 700;
    margin-left: 4px;
    width: 60%;
    font-size: 14px;
}

.wzxx .xx2 {
    font-size: 14px;
    color: azure;
    height: 30px;
    line-height: 30px;
    background: red;
    margin-right: 4px;
    border-radius: 4px;
    width: 40%;

}






/*
    轮播图区域 后期改成数据渲染
    */
.lunbo {
    width: 80%;
    margin: 0 auto;
    height: 100px;

    position: absolute;
    left: 40px;
    top: 85px
}

/*
    轮播图图片
    */
.lunbo img {
    width: 100%;

}

.lunbo .my-swipe {
    height: 191px;
}

#head {

    width: 100%;
    height: 13rem;
    background: rgb(129, 160, 103);
    margin-top: 1.25rem;


}

.shang {
    display: flex;
    line-height: 4rem;
}

.hua {
    width: 90%;
    margin: 0 auto;
    height: 300px;
    background: #fff;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;

}

.hua ul {
    display: flex;
    width: 100%;
    height: 200px;
    flex-wrap: wrap;

}

.hua ul li {
    width: 20%;
    height: 100px;
    background: #fff;


}

.hua .tu {
    width: 80%;
    text-align: center;
    margin: 0 auto;

}


.hua li img {
    width: 70%;
    margin-top: 15px;
    border-radius: 10px;

}

.hua li p {
    font-size: 12px;
}

.hua .tup {
    height: 100px;
    width: 100%;
    background: aquamarine;
}

.hua .tup img {
    width: 50%;
}

.body .wen2 {
    height: 30px;
    background: rgb(255, 255, 255);

    width: 90%;
    margin: 0 auto;
    margin-top: 0.85rem;
    border-radius: .8125rem;
    line-height: 30px;
    color: red;
}

.jiaoyi {
    width: 90%;
    margin: 0 auto;
    height: 240px;
    background: #fff;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;

}

.jiaoyi .wen-top {
    display: flex;
    justify-content: space-between;
    width: 90%;
    border-bottom: 1px solid rgb(244, 244, 244);
    margin: 0 auto;
    height: 30px;
    line-height: 30px;
}

.jiaoyi .wen-top .top-p1 {
    font-size: 14px;
}

.jiaoyi .wen-bottom {
    width: 90%;
    margin: 0 auto;
    height: 200px;


}

.jiaoyi .wen-bottom .ul1 {
    border-bottom: 1px solid rgb(244, 244, 244);
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
}

.jiaoyi .wen-bottom .ul1 li {
    width: 32%;
    height: 80px;
    margin-top: 10px;

}

.jiaoyi .wen-bottom .ul1 li .nk {
    text-align: center;
    line-height: 25px;
    padding-top: 5px;

}

.jiaoyi .wen-bottom .ul1 li .nk .ww1 {
    font-size: 14px;
}

.jiaoyi .wen-bottom .ul1 li .nk .ww2 {
    font-size: 14px;
    display: flex;
    justify-content: center;
}

.jiaoyi .wen-bottom .ul1 li .nk .ww2 .icon4 {
    padding-top: 5px;
}

.jiaoyi .wen-bottom .ul1 li .nk .ww3 {
    font-size: 12px;
    display: flex;
    justify-content: center;
}

.jiaoyi .wen-bottom .ul1 .shugang {
    border-left: 1px solid rgb(244, 244, 244);
}



.jiaoyi .wen-bottom .ul2 {

    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
}

.jiaoyi .wen-bottom .ul2 li {
    width: 32%;
    height: 80px;
    margin-top: 10px;

}

.jiaoyi .wen-bottom .ul2 li .nk {
    text-align: center;
    line-height: 25px;
    padding-top: 5px;

}

.jiaoyi .wen-bottom .ul2 li .nk .ww1 {
    font-size: 14px;
}

.jiaoyi .wen-bottom .ul2 li .nk .ww2 {
    font-size: 14px;
    display: flex;
    justify-content: center;
}

.jiaoyi .wen-bottom .ul2 li .nk .ww2 .icon4 {
    padding-top: 5px;
}

.jiaoyi .wen-bottom .ul2 li .nk .ww3 {
    font-size: 12px;
    display: flex;
    justify-content: center;
}

.jiaoyi .wen-bottom .ul2 .shugang {
    border-left: 1px solid rgb(244, 244, 244);
}

.xxx {
    width: 90%;
    margin: 0 auto;
    height: 80px;
    background: #fff;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;

}

.xxx .zuo {
    width: 25%;
    height: 80px;
    position: relative;
    float: left;

}

.xxx .you {
    width: 75%;
    height: 80px;

    float: right;
}

.xxx .zuo img {
    height: 30px;
    width: 30px;
    position: absolute;
    top: 0;
    left: 0;
}

.xxx .zuo .zuo-p1 {
    padding-top: 30px;
    font-size: 14px;
}

.xxx .zuo .zuo-p2 {
    padding-top: 3px;
    font-size: 12px;
}

.xxx .you .you-top {
    height: 30px;
    padding-top: 10px;
    display: flex;
}

.xxx .you .you-top .mz {
    font-size: 18px;
    padding-left: 5px;


}

.xxx .you .you-top .shu {
    font-size: 18px;
    padding-top: 6px;
    padding-left: 5px;
}

.xxx .you .you-top .hz {
    font-size: 14px;
    padding-top: 6px;
    padding-left: 2px;
}

.xxx .you .you-bottom {
    height: 30px;
    padding-top: 10px;
    display: flex;
}

.xxx .you .you-bottom .mm {
    display: block;
    color: rgb(204, 204, 204);
    background: rgb(244, 244, 244);
    height: 20px;
    width: 34px;
    font-size: 15px;
    margin-left: 5px;
    margin-top: 3px;
    border-radius: 4px;

}

.xxx .you .you-bottom .ren {
    color: rgb(204, 204, 204);
    font-size: 15px;
    margin-top: 3px;
    margin-left: 5px;

}

.xxx .you .you-bottom .ren1 {
    margin-top: 5px;
}

.xxx .you .you-bottom .mm1 {
    margin-left: 25px;
}

/*
*商品购物列表---------------抢购
*/
.sp {
    width: 90%;
    margin: 0 auto;
    background: #fff;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.sp .sp-top {
    width: 100%;
    margin: 0 auto;
    height: 80px;
    background: rgb(254, 234, 235);
}

.sp .sp-top .top-zuo {
    width: 50%;
    height: 80px;
    float: left;
}

.sp .sp-top .top-you {
    width: 50%;
    height: 80px;
    float: right;
    line-height: 80px;
}

.sp .sp-top .top-zuo .zuo-top {
     height: 40px;
}
.sp .sp-top .top-zuo .zuo-bottom {
    height: 40px;
    display: flex;
    line-height: 40px;
    text-align: center;

}
.sp .sp-top .top-zuo .zuo-top .qg{
    font-size: 18px;
    font-weight: 800;
    line-height: 40px;
    text-align: left;
    padding-left: 5px;
}
.sp .sp-top .top-zuo .zuo-bottom .jjs{
    padding-left: 5px;
    font-size: 13px;
}
.sp .sp-top .top-zuo .zuo-bottom .sj{
    display: block;
    height: 20px;
    width: 20px;
    font-size: 15px;
    margin-top: 10px;
    background: rgb(196, 11, 19);
    line-height: 20px;
    border-radius: 3px;
}
.sp .sp-top .top-zuo .zuo-bottom .sj1{
    margin-left: 4px;
}
.sp .sp-top .top-zuo .zuo-bottom .mh{
    padding: 0 3px;
}
.sp .sp-top .top-you .qc{
    font-size: 15px;
    line-height: 30px;
    display: inline-block;
    width: 140px;
    height: 30px;
    background: #fff;
    border-radius: 15px;

}



</style>